<template>
  <div>
    <video ref="videoPlayer" class="video-js" />
    <el-button @click="play">play</el-button>
  </div>
</template>

<script>
import videojs from 'video.js'
import txClient from '@/plugins/txOss'
export default {
  name: 'videoPlayer',
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      player: null
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    play() {
      txClient.getObjectUrl({
        Bucket: process.env.VUE_APP_TX_BUCKET1,
        Region: process.env.VUE_APP_TX_REGION1,
        Key: 'video1.mp4'
      }, (err, data) => {
        if (err) console.log(err)
        console.log(data.Url)
        this.options.sources[0].src = data.Url
        this.player = videojs(this.$refs.videoPlayer, this.options, () => {
          console.log('onPlayReady', this)
        })
      })
    }
  }
}
</script>

<style>

</style>
